body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  position: relative;
  width: 250px;
  height: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom, transparent, black),
    linear-gradient(to right, white, transparent);
  background-color: hsl(0, 100%, 50%);
  margin-bottom: 20px;
}
.draggable {
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: -10px;
  transform: translate(0, 0);
  width: 20px;
  height: 20px;
  cursor: move;
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  background-color: #000;
}
.color-info {
  width: 250px;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 4px;
}
.color-info > div {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #cbd5e1;
}
.container__hue {
  width: 250px;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  position: relative;
  background-image: linear-gradient(
    to right,
    rgb(255 0 0),
    rgb(255 255 0),
    rgb(0 255 0),
    rgb(0 255 255),
    rgb(0 0 255),
    rgb(255 0 255),
    rgb(255 0 0)
  );
}
.draggable__hue {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: move;
  user-select: none;
  position: absolute;
  top: 0;
  left: -8px;
  border: 2px solid #fff;
  box-sizing: border-box;
  background-color: red;
}
.container__alpha {
  border-radius: 4px;
  width: 250px;
  height: 16px;
  margin-bottom: 20px;
  position: relative;
  background: linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left /
      auto auto,
    conic-gradient(
        #666 0.25turn,
        #999 0.25turn 0.5turn,
        #666 0.5turn 0.75turn,
        #999 0.75turn
      )
      top left / 16px 16px repeat;
}
.draggable__alpha {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: move;
  user-select: none;
  touch-action: none;
  position: absolute;
  top: 0;
  left: -8px;
  border: 2px solid #fff;
  box-sizing: border-box;
  background-color: #000;
}
